<!-- 页面医院及其分类 -->

<template>
    <div class="level">
        <h1>医院</h1>

        <!-- 第一行的医院等级 -->
        <div class="content">
            <div class="left">等级：</div>
            <ul class="hospital">
                <li :class="{active:activeFlag == ''}" @click="backUp">
                    全部
                </li>
                <li v-for="item in hospitalLevel" :key="item.value"
                    :class="{active:activeFlag == item.value}"
                    @click="changeLevel(item.value)">
                    {{ item.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts" name="Level">
    import {reqHospitalDict} from '@/api/home'
    import {onMounted,ref} from "vue";
    import type {HospitalLevelResponseData,HospitalLevelArr} from "@/api/home/type";

    let activeFlag = ref<string>('')
    let hospitalLevel = ref<HospitalLevelArr>([])

    const getHospitalDict = async()=>{
        let result:HospitalLevelResponseData = await reqHospitalDict('hostype')
        if (result.code === 200){
            hospitalLevel.value = result.data
        }
    }
    onMounted(()=>{
        getHospitalDict()
    })

    let $emit = defineEmits(['getLevel'])
    const changeLevel = (item:string)=>{
        activeFlag.value = item
        $emit('getLevel',item)
    }

    // 点击全部返回
    const backUp = ()=>{
        activeFlag.value = ''
        $emit('getLevel','')
    }

</script>

<style scoped lang="css">
    /*全局去除默认样式*/
    *{
      padding:0;
      margin:0;
      box-sizing: border-box;
        font-size: 14px;
    }
    .level{
        color: #7f7f7f;
        h1{
            font-weight: 900;
            margin: 10px 0;

        }
        .content{
            display: flex;
            .left{
                margin-left: 10px;
            }
            .hospital{
                display: flex;
                li{
                    margin-right: 10px;
                    list-style: none;
                    &.active{
                        color: #55a6fe;
                    }
                }
                li:hover{
                    color: #55a6fe;
                    cursor: pointer;
                }
            }
        }
    }
</style>